<template>
  <el-dialog title="分配角色" :visible.sync="visible">
    <p>当前用户 : {{ mg_name }}</p>
    <p>当前角色 : {{ role_name }}</p>
    <!-- 选择 其中select_roleId为选择的角色对应的value-->
    <el-select v-model="select_roleName" placeholder="请选择">
      <el-option
        v-for="item in roleList"
        :key="item.role_id"
        :label="item.role_name"
        :value="item.role_name"
      >
      </el-option>
    </el-select>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dispatchRole()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "DialogRole",
  created() {
    this.$bus.$on("visibleRole", (flag) => {
      this.visible = flag; //更改显示
      this.select_roleName = ""; //情况角色选择宽
    });
  },
  data() {
    return {
      visible: false,
      select_roleName: "",
    };
  },
  props: {
    mg_id: {
      type: Number,
      default: 0,
      require: true,
    },

    mg_name: {
      type: String,
      default: "",
      require: true,
    },
    role_name: {
      type: String,
      default: "",
      require: true,
    },
    roleList: {
      type: Array,
      default: [],
      require: true,
    },
  },
  methods: {
    ...mapActions("userStore", ["update_user_info"]),
    dispatchRole() {
      if (this.select_roleName === "") return alert("未选择角色!");
      //修改state对应id的role_name
      Object.keys(this.$store.state.userStore.userList).some((key) => {
        if (this.$store.state.userStore.userList[key].mg_id === this.mg_id) {
          //改role_name即可 后端会根据name换成id 的
          this.$store.state.userStore.userList[key].role_name =
            this.select_roleName;
          return true;
        }
      });
      //修改完成 调用更新函数
      this.update_user_info({ mg_id: this.mg_id, isFormData: false });
      this.visible = false;
    },
  },
};
</script>

<style  scoped>
::v-deep .el-dialog__body {
  padding: 10px 20px 0;
}
</style>
